<script lang='ts' setup>
import { ref, reactive } from 'vue'
import { jumpPath } from '/@/utils/router-kit';
import { RoleEditUrl } from '/@/views/org/mapping.json'
import roleServiceApi from '/@/api/org/bean/role';
import appServiceApi from '/@/api/org/bean/app';
import { deletePageTableSelectionDataList } from '/@/utils/api-service';
const RoleListTableRef = ref();
const RoleTableState = reactive({
    queryColumn: [
        { name: 'likeAll', type: 'input', label: '模糊搜索', placeholder: "请输入角色名称/描述" },
    ],
    /**查询参数 */
    queryparam: { likeAll: null },

    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "appName", label: "所属应用", width: "180", columnKey: 'appId', showOverflowTooltip: true,
            filter: { type: 'function', loadData: () => appServiceApi.queryManagedApplication(), textKey: 'appName', valueKey: 'appId' },
        },
        {
            prop: "roleName", label: "角色名称", sort: { sortable: 'custom' }, type: 'link', showOverflowTooltip: true,
            linkClick: (row: any) => jumpPath(RoleEditUrl + row.roleId), align: 'left'
        },
        { prop: "roleTypeName", width: "150", label: "角色类型", columnKey: 'roleType', type: 'string', filter: { type: 'dictionary', codeItemId: 'ROLE_TYPE' } },
        { prop: "roleDescription", label: "描述", align: 'left', showOverflowTooltip: true },
        {
            prop: "common", label: "是否公用", width: "100", slot: "customCommon", columnKey: 'common',
            filter: { type: 'static', filters: [{ value: 'Y', text: '是' }, { value: 'N', text: '否' }] }
        },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => roleServiceApi.queryPage(null, { ...params, ...RoleTableState.queryparam, refCols: 'default' }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => roleServiceApi.exportData(null, { ...params, ...RoleTableState.queryparam }),
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        deletePageTableSelectionDataList(RoleListTableRef, roleServiceApi);
    },

    /**
     * 查询事件
     */
    onSearch: () => RoleListTableRef.value.loadTable()
})

defineExpose({
    getListTableRef: () => RoleListTableRef.value,
    deleteTableData: () => RoleTableState.deleteTableData()
})

</script>
<template>
    <jxtech-page-table
        ref="RoleListTableRef"
        row-key="roleId"
        fit="full"
        :table-column="RoleTableState.tableColumn"
        :load-data="RoleTableState.loadData"
        :exp-data="RoleTableState.expData"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <jxtech-search-form
                    :query-column="RoleTableState.queryColumn"
                    :query-form="RoleTableState.queryparam"
                    @handle-search="RoleTableState.onSearch"
                    :col-span="12"
                ></jxtech-search-form>
            </div>
        </template>
        <template #customCommon="{ row }">
            <!-- <el-checkbox v-model="row.common" disabled></el-checkbox> -->
            <el-tag v-if="row.common == true" type="success" size="small">是</el-tag>
            <el-tag v-else type="danger" size="small">否</el-tag>
        </template>
    </jxtech-page-table>
</template>